<meta charset="utf-8">
<!-- <script src="main.js"></script> -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
  .red {
    color: red;
  }

  .thin {
    font-weight: 200;
  }
  .italic {
    font-style: italic;
  }

  .active {
    letter-spacing: 0.5em;
  }


</style>
<body>
    

    <div id="app">
      <!-- class -->
      <h1 :class="['red', 'thin', flag?'italic':'']">很大很大哦 H1 使用3元表达式</h1>
      <h1 :class="['red', 'thin', {'active': flag}]">很大很大哦 H1 使用对象</h1>
      <h1 :class="classObj">很大很大哦 H1 使用对象</h1>
      
      <!-- style -->
      <h1 :style="{color:'red', 'font-style': 'italic'}">H1=====</h1>
      <h1 :style="[styleObj, styleObj2]">H1=====</h1>

    </div>
    </body>


    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            flag: true,
            classObj: {
              red: false, 
              thin: true
            },
            styleObj:{
              'font-style': 'italic'
            },
            styleObj2:{
              color: 'red',
              'font-weight': 200,
            }
            
          },
        


        });
    </script>